/*
 * @Author: Wxx
 * @Date: 2022-02-27 16:32:27
 * @LastEditors: Wxx
 * @LastEditTime: 2022-02-27 17:00:00
 * @Description:
 */
import React, { Component } from "react";
import { fromJS } from "immutable";
export default class App extends Component {
  state = {
    info: fromJS({
      name: "冰墩墩",
      location: {
        province: "河北",
        city: "北京",
      },
      favor: ["滑雪", "溜冰", "跳舞"],
    }),
  };

  componentDidMount() {
    console.log(this.state.info);
  }

  render() {
    return (
      <div>
        <h1>个人信息</h1>
        <button
          onClick={() => {
            this.setState({
              info: this.state.info
                .set("name", "雪融融")
                .setIn(["location", "province"], "四川")
                .setIn(["location", "city"], "成都"),
            });
          }}
        >
          修改名字和地址
        </button>
        <p>{this.state.info.get("name")}</p>
        <p>
          {this.state.info.get("location").get("province")}--
          {this.state.info.get("location").get("city")}
        </p>
        {this.state.info.get("favor").map((item, index) => (
          <li key={item}>
            {item}
            <button
              onClick={() => {
                this.setState({
                  info: this.state.info.update("favor", (list) =>
                    list.splice(index, 1)
                  ),
                });
              }}
            >
              del
            </button>
          </li>
        ))}
      </div>
    );
  }
}
